<!--  记得import .js中自定义的方法-->

<template>
  <div>
    <!--对话框    添加和更新用的 -->
    <el-dialog :title="title" :visible.sync="dialogFormVisible" width="40%">    <!--  dialogFormVisible是自定义的弹窗名  -->
      <el-form :model="selectCourse" :rules="selectCourseRules" ref="selectCourseRulesForm">

        <el-form-item label="课程号" prop="courseNo" v-model="keyword.courseNo" v-show="title === '编辑课程'">
          <el-input v-model="selectCourse.courseNo" autocomplete="off" style="width:500px" disabled></el-input>
        </el-form-item>

        <el-form-item label="课程名称" prop="courseName">
          <el-input v-model="selectCourse.courseName" autocomplete="off" style="width:500px"></el-input>
        </el-form-item>

        <el-form-item label="授课教师" prop="teacherName">
          <el-input v-model="selectCourse.teacherName" autocomplete="off" style="width:500px"></el-input>
        </el-form-item>

        <el-form-item label="教室容量" prop="roomCapacity">
          <el-input v-model="selectCourse.roomCapacity" autocomplete="off" style="width:500px"
                    :disabled="title !== '新增课程'"></el-input>
        </el-form-item>

      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addCourse('selectCourseRulesForm')" v-show="title === '编辑课程'">确认保存
        </el-button>
        <el-button type="primary" @click="addCourse('selectCourseRulesForm')" v-show="title === '新增课程'">确认添加
        </el-button>
      </div>
      <div style="font-size: 36px; font-family: 'LiSu'; margin-top: 6px; margin-left: 30px">注意:{{
          this.title
        }}时，课程名称不能相同
      </div>
      <br>
    </el-dialog>


    <!--    第二对话框-->
    <el-dialog :visible.sync="dialogFormVisible2" width="40%">
      <h2>管理课程号为{{ selectCourse.courseNo }}的课程的选课情况</h2>
      <h3>当前{{ selectCourse.number }}人,容量{{ selectCourse.roomCapacity }}人</h3>
      <el-table v-loading="loading" :data="courseList2">
        <el-table-column label="学号" align="center" prop="id" :width="200"/>
        <el-table-column label="学生用户名" align="center" prop="sname" :width="200"/>


        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">  <!-- 操作栏 -->
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              @click="studentDelete(scope.row)"
            >删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--分页栏-->
      <el-pagination
        @size-change="handleSizeChange2"
        @current-change="handleCurrentChange2"
        :current-page="currentPage2"
        :page-sizes="[3,4,5,10]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total2" >
      </el-pagination>
      <!--    :page-size="100"貌似是一个必须的占用符 可以为null-->`
    </el-dialog>


    <!--    上方按钮行-->
    <el-form :inline="true" :model="keyword" ref="searchForm" class="demo-form-inline">
      <!-- 最后加的keyword和searchForm -->
      <div style="font-size: 36px; font-family: 'LiSu'; margin-top: 6px; margin-left: 30px">课程管理</div>
      <br>

      <el-form-item label="1、" style="margin-top: 3px; margin-left: 30px">
        <el-button type="primary" size="small" @click="openAddDialog" icon="el-icon-plus"
                   style="margin-right: 30px; margin-top: 6px">新增课程
        </el-button>

        <el-button type="primary" size="small" @click="openAddDialogInThisPage" icon="el-icon-plus"
                   style="margin-right: 30px; margin-top: 6px">新增课程
        </el-button>

        <el-button type="primary" size="small" @click="openAddDialogInThisPage2" icon="el-icon-plus"
                   style="margin-right: 30px; margin-top: 6px">新页面添加课程
        </el-button>

        <el-button type="primary" size="small" @click="openAddDialogInNewTab" icon="el-icon-plus"
                   style="margin-right: 30px; margin-top: 6px">新页面子路由新增课程
        </el-button>
      </el-form-item>

      <a href="https://www.baidu.com" target="_blank" style="text-decoration: none; color: inherit; cursor: pointer;">
        <el-button type="primary" size="small" icon="el-icon-plus" style="margin-right: 30px; margin-top: 6px">
          前往某个URL
        </el-button>
      </a>

      <br>

      <el-form-item label="2、" prop="courseName" style="margin-top: 3px; margin-left: 30px">
        <!--    clearable    输入框的右侧会显示一个清除按钮（通常是一个小图标）-->
        <el-input size="small" clearable v-model="keyword.courseName" placeholder="输入课程名"></el-input>
      </el-form-item>

      <el-form-item>

        <el-button type="primary" size="small" @click="search" icon="el-icon-search"
                   style="margin-top: 6px;margin-left: 30px">查找课程
        </el-button>

      </el-form-item>

    </el-form>


    <!-- 中间行数据栏 -->
    <el-table v-loading="loading" :data="courseList" class="styled-table">
      <el-table-column label="课程号" align="center" prop="courseNo" :width="200"/>
      <el-table-column label="课程名称" align="center" prop="courseName" :width="200"/>
      <el-table-column label="授课老师" align="center" prop="teacherName" :width="200"/>
      <el-table-column label="教室容量" align="center" prop="roomCapacity" :width="200"/>
      <el-table-column label="当前选课人数" align="center" prop="number" :width="200"/>


      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">  <!-- 操作栏 -->
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            @click="handleUpdate(scope.$index, scope.row)"
          >修改
          </el-button>
          <el-button
            size="mini"
            type="text"
            @click="handleDelete(scope.row)"
          >删除
          </el-button>
          <el-button
            size="mini"
            type="text"
            @click="manage(scope.row)"
          >管理当前选课
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--分页栏-->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[5,8,10,200]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total" class="Hulboy2">
    </el-pagination>
    <!--    :page-size="100"貌似是一个必须的占用符 可以为null-->

  </div>
</template>


<script>
import row from "element-ui/packages/row";
// /////////////////      ///////////////////////////////////////
import {addCourse, getList, getList2, edit, deleteById, getList3, deletestudent,} from "@/api/course";
import {mapGetters} from "vuex";

export default {
  computed: {
    row() {
      return row
    },
    ...mapGetters([
      'name'
    ])
  },

  methods: {
    fetchData() { // 获取数据
      // 组装查询参数
      let params = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        courseName: this.keyword.courseName,     // 模糊查询用的
        // status: this.keyword.status,
        // measureName: this.keyword.measureName,
      }
      console.log(params);
      // getList是api/unit.js中自己
      getList(params).then(res => {
        let pageInfo = res.data;
        // console.log("pageInfo", pageInfo)
        this.loading = false;
        this.courseList = pageInfo.list;
        // console.log("====>",this.payList)
        // list就是pageInfo中含所有属性的对象的集合
        //   对象的集合
        this.total = pageInfo.total
        console.log("使用以上参数,findAll查到共", this.total, "条数据")    // 打印总行数(不分页)

      })
    },

    openAddDialogInNewTab() {
      // const path = '/example/xz'; // 你的添加课程页面路由(修改为与你的路由配置中相匹配的路径 )
      const path = '/example/xz'; // 你的添加课程页面路由(修改为与你的路由配置中相匹配的路径 )
      window.open(this.$router.resolve(path).href, '_blank');
      // _blank 参数和 window.open 调用，是用于在新窗口或新标签页，
      // Vue Router 提供了更适用于单页面应用（SPA）的导航方式。
    },
    openAddDialogInThisPage() {
      // 使用 Vue Router 的 push 方法在当前页面跳转
      // this.$router.push('/example/xz');
      this.$router.push({ name: 'Xz' }); // 使用命名路由进行跳转
    },

    openAddDialogInThisPage2() {
      // 使用 Vue Router 的 push 方法在当前页面跳转
      this.$router.push('/xz2');
    },


    fetchData2() { // 严格查找课程名称
      // 组装查询参数
      let params = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        courseName: this.selectCourse.courseName,
        // status: this.keyword.status,
        // measureName: this.keyword.measureName,
      }
      console.log("传参了吗？", params);
      // getList是api/unit.js中自己
      return getList2(params).then(res => {
        let pageInfo = res.data;
        // console.log("pageInfo", pageInfo)
        this.loading = false;
        this.courseList = pageInfo.list;
        // console.log("====>",this.payList)
        // list就是pageInfo中含所有属性的对象的集合
        //   对象的集合
        this.total = pageInfo.total
        console.log("使用以上参数,findAll2查到共", this.total, "条数据")    // 打印总行数(不分页)
        return this.total;
      })
    },

    /**  管理当前选课用的  */
    fetchData3() {
      // 组装查询参数
      let params = {
        pageNum: this.pageNum2,
        pageSize: this.pageSize2,
        cid: this.cid
      }
      console.log("传参了吗？", params);
      // getList是api/unit.js中自己


      getList3(params).then(res => {
        if(res.code == 20000){
          this.loading = false;
          this.courseList2 = res.data.list
          console.log("courseList2courseList2", this.courseList2 )
          this.pageNum2 = res.data.pageNum
          this.total2 = res.data.total
        }else{
          this.$message({
            type: 'error',
            message: '查询失败',
            duration: 1000
          })
        }
        console.log("使用以上参数,findAll2查到共", this.total, "条数据")    // 打印总行数(不分页)
      })
    },


    handleSizeChange(val) {
      this.pageSize = val;
      this.fetchData()
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.fetchData()
    },

    handleSizeChange2(val) {
      this.pageSize2 = val;
      this.fetchData3()
    },
    handleCurrentChange2(val) {
      this.pageNum2 = val;
      this.fetchData3()
    },


    //   模糊搜索
    search() {
      this.pageNum = 1
      this.fetchData()
    },

    // 打开添加对话框
    openAddDialog() {
      this.title = '新增课程';
      this.dialogFormVisible = true;
    },
    // 另一个对话框
    manage(row) {
      this.selectCourse = row
      this.dialogFormVisible2 = true;
      this.cid = this.selectCourse.courseNo
      this.fetchData3()
    },


    addCourse(formName) {
      this.$refs[formName].validate((valid) => {     // valid是个布尔值, => 后面是提交表格校验返回true时向后执行的代码
        if (valid) {
          // 上面是校验通过
          // 此处执行添加
          // console.log("添加status", this.selectCourse)
          this.fetchData2().then(total => {
            console.log("在Promise的then中获取到的总条数:", total);
            // 这里你可以使用total做其他事情
            console.log("重复条数：", this.total)
            if (this.total === 0) { // 不重复，才往里执行
              if (this.title === '新增课程') {
                addCourse(this.selectCourse).then(res => {
                  this.$message({
                    type: 'success',
                    message: '新增成功',
                  });
                  this.fetchData()
                  this.$refs[formName].resetFields();
                })
              } else if (this.title === '编辑课程') {
                edit(this.selectCourse).then(res => {
                  this.$message({
                    type: 'success',
                    message: '修改成功',
                  });
                  this.fetchData()
                  this.$refs[formName].resetFields();
                })
              }
            } else {
              console.log("重复条数不为0，为", this.total, "不执行添加或修改")
              this.$message({
                type: 'error',
                // type: 'warning',
                // type: 'info',
                message: '课程名称不可重复，请更换课程名称',
                duration: 2000,
              });
              this.pageNum = 1; // 嗯
              this.fetchData()
              // setTimeout(() => {
              //   // 这里的this将指向调用setTimeout时所在的上下文中的this
              //   // 执行你需要在fetchData之后0.5秒执行的代码
              //   window.location.reload();
              // }, 1000);
            }
          });


        } else {
          console.log('error submit!!');
          return false;
        }
        this.dialogFormVisible = false;
      });
    },

    handleUpdate(a, b) {
      // console.log(a, b);
      console.log("打印a（本页行下标）", a);
      console.log("打印b（整行数据）", b);
      this.title = '编辑课程';
      this.selectCourse = b;   // 回显
      this.dialogFormVisible = true;
    },

    // ID删除
    handleDelete(row) {
      console.log("本课程当前选课人数为", row.number, "人")
      if (row.number === 0) {
        this.$confirm('确认删除 “' + row.courseName + '” 课程吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // 发请求
          let params = {
            id: row.courseNo
          }
          deleteById(params).then(res => {
            this.$message({
              type: 'success',
              message: '删除成功',
              duration: 2000,
            });
            this.fetchData()
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
            duration: 2000,
          });
          this.fetchData()
        });
      } else {
        console.log("当前选课人数不为0，不准删除")
        this.$message({
          type: 'error',
          message: '当前选课人数不为0，不准删除',
          duration: 2000,
        });
        this.fetchData()
      }
    },
    studentDelete(row) {
      this.$confirm('确认删除名为["' + row.sname + '"]的学生吗?', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let params = {
          sid: row.id,
          cid: this.cid
        }
        deletestudent(params).then(res => {
          if (res.code == 20000) {
            this.$message({
              type: 'success',
              message: '删除成功',
              duration: 1000
            })
            this.selectCourse.number = this.selectCourse.number - 1
            this.fetchData3()
          } else {
            this.$message({
              type: 'error',
              message: res.msg,
              duration: 1000
            })
          }
        })
      })
    }


  },
  name: "SelectCourse",
  data() {
    return {
      // 遮罩层
      loading: true,
      // 单位表格数据
      courseList: [],
      courseList2: [],
      // 上面对应的this.courseList = pageInfo.list;  别忘了改，否则不显示
      pageNum: 1,     // 使刚进去时看到的是：查找完的第“几”页数据
      pageSize: 5,    // 这个数一定要和:page-sizes="[6,8,10,200]"中的第一个显示条目一样，否则丢失数据总数
      currentPage: 1, // 决定刚进去时显示选中第“几”页的页码，注意一定要currentPage == pageNum，否则二者显示的关系不对应
      total: 0,

      pageNum2: 1,     // 使刚进去时看到的是：查找完的第“几”页数据
      pageSize2: 3,    // 这个数一定要和:page-sizes="[6,8,10,200]"中的第一个显示条目一样，否则丢失数据总数
      currentPage2: 1, // 决定刚进去时显示选中第“几”页的页码，注意一定要currentPage == pageNum，否则二者显示的关系不对应
      total2: 0,

      cid: '',

      ids: [],
      keyword: {
        courseNo: null,
        courseName: null,
        // status: null,
        // measureName: null,
      },
      title: '',
      dialogFormVisible: false,
      dialogFormVisible2: false,
      // inputValue: '',  // 在data()中声明inputValue，用于存储<el-autocomplete>的输入值
      // restaurants: [],
      // state1: '',
      // state2: '',
      selectCourse: {
        courseNo: null,
        courseName: null,
        teacherName: null,
        roomCapacity: null,
        number: null,
        //   写不写scope.row都能获得整行数据，包括未显示的
      },
      selected: {
        id: null,
        name: null,
      },

      // options: [{
      //   value: '采购中',
      // }, {
      //   value: '待采购',
      // }, {
      //   value: '已驳回',
      // },],
      // value: '',

      // rule1
      // rule
      // rule
      // rule
      selectCourseRules: {
        courseName: [
          {required: true, message: '课程名称不能为空', trigger: 'blur'},
        ],
        teacherName: [
          {required: true, message: '授课教师不能为空', trigger: 'blur'},
        ],
        roomCapacity: [
          {required: true, message: '教室容量不能为空', trigger: 'blur'},
        ],

      },




    }
  },
  created() {
    this.fetchData()
  },
}
</script>


<style> // 中间数据表格的样式
.styled-table {
  border-collapse: collapse; /* 合并边框 */
  width: 100%; /* 使表格宽度填满容器 */
}

.styled-table th, .styled-table td {
//border: 0.2px solid #409EFF; /* 横竖边框颜色   开始1px*/ border: 0.2px solid #000000; /* 横竖边框颜色   开始1px*/ padding: 12px; /* 单元格内边距    开始12px*/ text-align: center; /* 内容居中对齐 */
}

.styled-table th {
//background-color: #f4f4f5; /* 表头背景色 */ background-color: #eeeeee; /* 表头背景色 */ font-weight: bold; /* 表头字体加粗 */
}
</style>
